<template>
  <div class="container" style="background: #ececec; padding: 30px;height: 100vh;">
    <a-card class="lg-box" title="登录" :bordered="false" style="width: 450px">
        <a-form
            :model="user"
            @finish="login">
            <a-form-item 
                label="用户名"
                name="username"
                :rules="[{ required: true, message: '请输入账号!' }]"
                >
                <a-input v-model:value="user.username" />
            </a-form-item>
            <a-form-item 
                label="密码"
                name="password"
                :rules="[{ required: true, message: '请输入密码!' }]">
                <a-input-password v-model:value="user.password" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">登录</a-button>
            </a-form-item>
        </a-form>
    </a-card>
  </div>
</template>

<script lang='ts' setup>
    import IUser from '@/types/IUser'
    import {reactive} from 'vue'
    import api from '@/api';
    import { useRouter} from 'vue-router'
    import { message } from 'ant-design-vue';
    import useUserStore from '@/store/users'
    const router=useRouter()
    let user=reactive<IUser>({
        username:'',
        password:''
    })
    const store=useUserStore()
    const login=async(values:IUser)=>{
        const result=await api.users.login(values)
        
        if(result.data.code){
            //保存token到localstorage
            localStorage.setItem('token',result.data.token)
            //通过调用pinia中的setToken方法实现token保存
            store.setToken(result.data.token)
            //进行路由的跳转
            router.push({
                path:'/'
            })
        }else{
            message.error('登录失败');
        }
        
    }
</script>

<style lang='scss' scoped>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>